import React from 'react';
import type { Meta, StoryObj } from '@storybook/react';
import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger
} from '../../components/ui/tooltip';
import { Button } from '../../components/ui/button';

const meta: Meta<typeof Tooltip> = {
  title: 'UI/Tooltip',
  component: Tooltip,
  tags: ['autodocs'],
  decorators: [
    (Story) => (
      <TooltipProvider>
        <Story />
      </TooltipProvider>
    ),
  ],
};

export default meta;
type Story = StoryObj<typeof Tooltip>;

export const Default: Story = {
  render: () => (
    <Tooltip>
      <TooltipTrigger asChild>
        <Button variant="outline">悬停查看</Button>
      </TooltipTrigger>
      <TooltipContent>
        <p>这是一个提示信息</p>
      </TooltipContent>
    </Tooltip>
  ),
};

export const WithIcon: Story = {
  render: () => (
    <Tooltip>
      <TooltipTrigger asChild>
        <Button variant="outline" size="icon">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
            <circle cx="12" cy="12" r="10"></circle>
            <path d="M12 16v-4"></path>
            <path d="M12 8h.01"></path>
          </svg>
        </Button>
      </TooltipTrigger>
      <TooltipContent>
        <p>帮助信息</p>
      </TooltipContent>
    </Tooltip>
  ),
};

export const Positions: Story = {
  render: () => (
    <div className="flex items-center justify-center gap-4">
      <Tooltip>
        <TooltipTrigger asChild>
          <Button variant="outline">上方</Button>
        </TooltipTrigger>
        <TooltipContent side="top">
          <p>提示显示在上方</p>
        </TooltipContent>
      </Tooltip>
      
      <Tooltip>
        <TooltipTrigger asChild>
          <Button variant="outline">右侧</Button>
        </TooltipTrigger>
        <TooltipContent side="right">
          <p>提示显示在右侧</p>
        </TooltipContent>
      </Tooltip>
      
      <Tooltip>
        <TooltipTrigger asChild>
          <Button variant="outline">下方</Button>
        </TooltipTrigger>
        <TooltipContent side="bottom">
          <p>提示显示在下方</p>
        </TooltipContent>
      </Tooltip>
      
      <Tooltip>
        <TooltipTrigger asChild>
          <Button variant="outline">左侧</Button>
        </TooltipTrigger>
        <TooltipContent side="left">
          <p>提示显示在左侧</p>
        </TooltipContent>
      </Tooltip>
    </div>
  ),
};

export const CustomStyle: Story = {
  render: () => (
    <Tooltip>
      <TooltipTrigger asChild>
        <Button variant="outline">自定义样式</Button>
      </TooltipTrigger>
      <TooltipContent className="bg-blue-500 text-white">
        <p>自定义样式的提示</p>
      </TooltipContent>
    </Tooltip>
  ),
};

export const WithDelay: Story = {
  render: () => (
    <Tooltip delayDuration={1000}>
      <TooltipTrigger asChild>
        <Button variant="outline">延迟显示</Button>
      </TooltipTrigger>
      <TooltipContent>
        <p>延迟 1 秒后显示</p>
      </TooltipContent>
    </Tooltip>
  ),
};
